<template>
  <div class="login-page">
    <div class="logo">
      <img :src="loginPng" alt="" />
    </div>
    <form action="" @submit="handleLogin">
      <view class="login-form">
        <view class="tb-input">
          <i class="icon iconfont icon-zhanghao"></i>
          <input
            v-model="loginParams.loginName"
            name="loginName"
            type="text"
            placeholder="账号"
          />
        </view>
        <view class="tb-input">
          <i class="icon iconfont icon-mima"></i>
          <input
            v-model="loginParams.loginPwd"
            type="password"
            name="loginPwd"
            placeholder="密码"
          />
        </view>
      </view>
      <tb-button form-type="submit">登录</tb-button>
    </form>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import loginPng from '@/static/image/tbLogin.png'
export default Vue.extend({
  data() {
    return {
      loginPng,
      loginParams: {
        loginName: '',
        loginPwd: '',
      },
      rules: {
        loginName: {
          rule: /\S/,
          name: '账号',
          msg: '账号不能为空',
        },
        loginPwd: {
          rule: /\S/,
          name: '密码',
          msg: '密码不能为空',
        },
      },
    }
  },
  methods: {
    handleLogin(e: any) {
      for (let key in e.detail.value) {
        if (!this.$validate(this.loginParams, key, this.rules)) return
      }
      this.$api.postLoginApi(this.loginParams).then((res: any) => {
        uni.setStorageSync('TALLY_BOOK_ACCESS_TOKEN', res.data.xaccessToken)
        uni.setStorageSync('TALLY_BOOK_USER_ID', res.data.id)
        uni.setStorageSync('USERINFO', JSON.stringify(res.data))
        this.$store.commit(
          'user/SET_TALLY_BOOK_ACCESS_TOKEN',
          res.data.xaccessToken
        )
        this.$store.commit('user/SET_TALLY_BOOK_USER_ID', res.data.id)
        this.$store.commit('user/SET_USERINFO', res.data)
        this.$store.commit('user/SET_LOGINNAME', res.data.loginName)
        uni.switchTab({ url: '/pages/index/index' })
        // uni.navigateTo({ url: '/pages/books/bookTemplate' })
      })
    },
  },
})
</script>
<style lang="less" scoped>
.login-page {
  height: 100%;
  padding-top: 150rpx;
  box-sizing: border-box;
  background: #87cefa;
  .logo {
    width: 150rpx;
    height: 150rpx;
    margin: 0 auto 50rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 80rpx;
    }
  }
  .login-form {
    background: #fff;
    width: 682rpx;
    height: 400rpx;
    margin: 0 auto;
    border-radius: 20rpx;
    padding: 50rpx 80rpx;
    box-sizing: border-box;
    .tb-input {
      height: 100rpx;
      margin-bottom: 50rpx;
      border-bottom: 1rpx solid #87cefa;
      display: flex;
      align-items: center;
      i {
        font-size: 40rpx;
        margin-right: 10rpx;
      }
      input {
        line-height: 40rpx;
        font-size: 30rpx;
      }
    }
  }
  button {
    margin-top: 80rpx;
    // width: 400rpx;
    width: 682rpx;
    border-radius: 20rpx;
    // background: #333333;
    // color: #87cefa;
    color: #333;
    font-size: 36rpx;
  }
}
</style>